@keyframes rotateOutDownRight{
    0%{
        -webkit-transform-origin:right bottom;
        -ms-transform-origin:right bottom;
        transform-origin:right bottom;
        -webkit-transform:rotate(0);
        -ms-transform:rotate(0);
        transform:rotate(0);
        opacity:1;
    }
    100%{
        -webkit-transform-origin:right bottom;
        -ms-transform-origin:right bottom;
        transform-origin:right bottom;
        -webkit-transform:rotate(-90deg);
        -ms-transform:rotate(-90deg);
        transform:rotate(-90deg);
        opacity: 0;
    }
}

.rotateOutDownRight{
    -webkit-animation-name:rotateOutDownRight;
    animation-name:rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpRight{
    0%{
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom;
        -webkit-transform:rotate(0);
        transform:rotate(0);
        opacity:1;
    }
    100%{
        -webkit-transform-origin:left bottom;
        transform-origin:left bottom;
        -webkit-transform:rotate(-90deg);
        transform:rotate(-90deg);
        opacity:0
    }

}
.rotateOutUpLeft{
    -webkit-animation-name:rotateOutUpLeft;
    animation-name:rotateOutUpLeft;
}
@keyframes rollIn{
    0%{
        opacity:0;
        -webkit-transform:translateX(-100%) rotate(120deg);
        -ms-transform:translateX(-100%) rotate(-120%);
        transform:translateX(-100%) rotate(120deg);
    }
    100%{
        opacity:1;
        -webkit-transform:translateX(0px) rotate(0deg);
        -ms-transform:translateX(0px) rotate(0deg);
        transform:translateX(0px) rotate(0deg);
    }
}
.roolIn{
    -webkit-aimation-name:rollIn;
    animation-name:rollIn;
}
@keyframes rollOut{
    0%{
        opacity:1;
        -webkit-transform:translateX(0px) rotate(0deg);
        -ms-transform:translateX(0px) rotate(0deg);
        transform:translateX(0px) rotate(0deg); 
    }
    100%{
        opacity:0;
        -webkit-transform:translateX(100%) rotate(120deg);
        -ms-transform:translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);
    }
}
.rollOut{
    -webkit-animation-name:rollOut;
    animation-name:rollOut;
}